<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>当前的n是{{n}}</h2>
        <button v-on:click="n++">点我n+1</button>
        <!--v-show后面表达时的值为布尔，决定dom是否展示，底层实现为调整display:none-->
        <h3 v-show="n>0">
            学习vue
        </h3>
        <!--v-if后面表达时的值为布尔，决定dom是否展示，底层实现为删除dom节点-->
        <h3 v-if="n>1">
            学习angular
        </h3>

        <h3 v-show="n>2">
            学习react
        </h3>
        <hr>
        <!--v-if和v-else-if和v-else可以组合使用，逻辑同if-else if -else语句，
            v-if必须在开头，v-if v-else-if v-else中间不能被其他dom打断，-->
        <h3>你的分数是{{score}}</h3>
        <h3 v-if="score>=90">优秀</h3>
        <h3 v-else-if="score>=80">良好</h3>
        <h3 v-else-if="score>=60">及格</h3>
        <h3 v-else>不及格</h3> <!--v-else不写条件-->
        
        <hr>
        <!--template标签不会破坏原来dom结构，在渲染时会去掉template，template只能用v-if-->
        <template v-if="n>=1"> 
            <h4>我要展示</h4>
            <h4>俺也一样</h4>
        </template>
    </div>
    <script>
        Vue.config.productionTip = false

        let vm = new Vue({
            el: "#root", 
            data: { 
                name: "stt",
                n: 0,
                score: 80,
            },
            methods: {

            },
        })
    </script>
</body>
</html>